<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
  body{
    margin: 0;
  }
   main{
      width: 30px;
      height: 1200px;
      background-color: #262626;
      position: absolute;
      right: 0;
   }
   .box{
     height: 900px;
   }
   ul{
     padding:0;
     margin: 0;
     list-style: none;
   }

</style>
</head>
<body>
  <main>
    <ul class="box">
     <li><img src=".\img1\zhanghao.png">
        <section class="hello"><span class="helloxiong"> <span class="cha"></span></span>
                        <p>你好！请<a href=#>登录</a>|<a>注册</a></p>
                    </section>
                    <section class="news">
                        <section><span class='dingdan'></span>
                            <p>我的订单</p>
                        </section>
                        <section><span class="xiaoxi"></span>
                            <p>我的消息</p>
                        </section>
                    </section>
                    <section class="julebu">我的俱乐部</section>

   </li>
     <li><img src=".\img1\gouwu.png"><li>
     <li><img src=".\img1\wujiaoxing.png"><li>
     <li><img src=".\img1\xin.png"></li>
     <li><img src=".\img1\zhongbiao.png"></li>
    </ul>
    
  </main>
  <script src="../0814/jquery.js"></script>
</body>
</html>
<script>
   $('.box li').mouseover(function(){

   })
</script>